import React, {Component} from 'react';
import {Card, Icon, Table, Modal, Select, Form} from 'antd';
import {reqCompanyRecruit, reqUpdateCompanyRecruitState,} from "../../api";
import Button from "antd/lib/button";
import {Link} from "react-router-dom";
import {PAGE_SIZE} from "../../utils/constants";

/*
* 招聘信息路由*/
class RecruitInformation extends Component {

    state = {
        count:0,
        visible: false,
        confirmLoading: false,
        results: [],//当前页招聘信息列表
    }

    //异步获取公司招聘基本信息

    getRecruitInformation = async (page) => {
        //发异步ajax请求，获取数据
        const result = await reqCompanyRecruit(page,PAGE_SIZE)
        const {count,results} = result.data
        //更新状态
        this.setState({
            count,
            results
        })
    }

    //初始化Table所有列的数组
    initColumns = () => {
        this.columns = [
            {
                title: '岗位',
                dataIndex: 'position.name',//显示数据对应的属性名
                width: "5%",
            },
            {
                title: '城市',
                dataIndex: 'city.cityname',
                width: "5%",
            },
            {
                title: '联系人',
                dataIndex: 'contact',
                width: "5%",
            },
            {
                title: '联系方式',
                dataIndex: 'contact_phone',
                width: "5%",
            },
            {
                title: '招聘人数',
                dataIndex: 'number',
                width: "10%",
            },
            {
                title: '技术要求',
                dataIndex: 'requirement',
                //由于是数组不能直接渲染
                render(arr) {
                    return arr.map(item => {
                        return item.name;   //使其返回数组中的一项
                    }).join(",");   //因为数据中user_name可能是两个人所以用逗号分隔开
                },
                width: "10%",
            },
            {
                title: '招聘简章',
                dataIndex: 'simple_desc',
                width: "20%",
            },
            {
                title: '悬赏金',
                dataIndex: 'reward',
                width: "5%",
            },
            {
                title: '保质期',
                dataIndex: 'pay_day',
                width: "5%",
            },
            {
                title: '招聘方式',
                dataIndex: 'requirestyle',
                width: "5%",
            },
            {
                title: '岗位状态',
                dataIndex: 'state',
                width: "5%",
            },
            {
                title: '操作',
                width: "5%",
                render: (results) => (
                    <span>
                        <Button type='primary' onClick={() => this.showModal(results)}>
                            <Icon type='form'/>修改招聘状态
                        </Button>
                    </span>
                ),

            }
        ]
    }

    //为第一次render()准备数据
    componentWillMount() {
        this.initColumns()
    }

    //发异步ajax请求
    componentDidMount() {
        this.getRecruitInformation()
    }

    //点击修改岗位状态弹出的事件处理
    handleOk = () => {
        //进行表单验证，如果通过了，才发送请求
        this.props.form.validateFields(async (err, values) => {
            if (!err) {
                //1、搜集数据
                const recruitId = this.recruitId
                if (values.status === "草稿") {
                    this.ste1 = "draft"
                } else if (values.status === "上线") {
                    this.ste1 = "online"
                } else {
                    this.ste1 = "offline"
                }
                const state = this.ste1
                const position = this.position.id
                const trade = this.trade.id
                const requirement = this.requirement.map(i => {
                    return i.id
                })
                const describe = this.describe
                const updateRecruitState = {
                    position,
                    trade,
                    requirement,
                    describe,
                    state
                }
                console.log(updateRecruitState)
                //2、调用接口请求函数去添加/更新
                const result = await reqUpdateCompanyRecruitState(updateRecruitState, recruitId)
                //跳转到当前页
                window.location.replace('/recruit/recruit_information')
                //3、根据结果提示
            } else {
                console.log('发送ajax请求失败 ');
            }
        });

        //保存状态
        this.setState({
            confirmLoading: true,
        });
        setTimeout(() => {
            this.setState({
                visible: false,
                confirmLoading: false,
            });
        }, 2000);

    };
    handleCancel = () => {
        console.log('Clicked cancel button');
        this.setState({
            visible: false,
        });
    };

    showModal = (results) => {
        //保存当前招聘信息id
        this.recruitId = results.id
        //保存招聘信息状态
        this.ste = results.state
        this.position = results.position
        this.trade = results.trade
        this.requirement = results.requirement
        this.describe = results.describe
        //更新状态
        this.setState({
            visible: true,
        });
    };

    render() {
        const extra = (
            <Link to="/recruit/add_recruit_information">
                <Button type='primary'>
                    <Icon type='form'/>
                    新增招聘信息
                </Button>
            </Link>

        )

        //读取状态数据
        const {results,count} = this.state
        const {visible, confirmLoading} = this.state;
        const {Option} = Select;
        const {getFieldDecorator} = this.props.form;
        const state = this.ste
        return (
            <div>
                <Card extra={extra}>
                    <Table rowKey='id'
                           dataSource={results}
                           columns={this.columns}
                           pagination={{
                            total:count,
                            defaultPageSize:PAGE_SIZE,
                            showQuickJumper:true,
                            onChange:(page)=>{
                                this.getRecruitInformation(page)
                            }

                        }}
                    />
                </Card>
                <Form.Item>
                    <Modal
                        title="请修改岗位状态"
                        visible={visible}
                        onOk={this.handleOk}
                        confirmLoading={confirmLoading}
                        onCancel={this.handleCancel}
                    >
                        <p>
                            {getFieldDecorator('status', {initialValue: state})(<Select
                                className="recruit-style-select1"
                                showSearch
                                style={{width: 200}}
                                placeholder="修改招聘岗位状态"
                                optionFilterProp="children"
                                filterOption={(input, option) =>
                                    option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
                                }
                            >
                                <Option value="草稿">草稿</Option>
                                <Option value="下线">下线</Option>
                                <Option value="上线">上线</Option>
                            </Select>)}

                        </p>
                    </Modal>
                </Form.Item>
            </div>

        )
    }
}

const WrappedRecruitInformation = Form.create()(RecruitInformation);
export default WrappedRecruitInformation;